<template>
  <div>
    <base-info :artist="artist"></base-info>
    <el-tabs>
      <el-tab-pane label="专辑">
        <hot50 :id="artist.id"></hot50>
        <album-detail :id="artist.id"></album-detail>
      </el-tab-pane>
      <el-tab-pane label="MV">
        <mv-list :mv-list="mvs"></mv-list>
      </el-tab-pane>
      <el-tab-pane label="歌手详情">
        <artist-desc :artistname="artist.name" :id="artist.id"></artist-desc>
      </el-tab-pane>
      <el-tab-pane label="相似歌手">
        <music-list :aritist="false" :musiclist="simiArtist"></music-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import baseInfo from './childComps/baseInfo.vue'
import hot50 from './childComps/hot50.vue'
import albumDetail from './childComps/album-detail.vue'
import mvList from '../mv/childsComps/mv-list.vue'
import artistDesc from './childComps/artist-desc.vue'
import musicList from '../../components/Musiclist/Musiclist.vue'
import { _getArtistMv, _getSimiArtist } from '../../network/aritist'
export default {
  components: { baseInfo, hot50, albumDetail, mvList, artistDesc, musicList },
  data () {
    return {
      artist: null,
      mvs: [], //mv的数据
      simiArtist: [] //相似歌手
    }
  },
  created () {
    this.artist = JSON.parse(this.$route.query.artist)
    console.log('组件挂载前')
    this.getMv()
    this.getSimiArtist()
  },
  methods: {
    async getMv () {
      // 获取歌手mv
      var res = await _getArtistMv(this.artist.id)
      console.log(res)
      this.mvs = res.data.mvs
    },
    async getSimiArtist () {
      // 获取相似歌手
      if (localStorage.cookie) {
        var res = await _getSimiArtist(localStorage.cookie, this.artist.id)
        console.log('8888888888888888888', res)
        this.simiArtist = res.data.artists
      } else {
        this.$message.info('请先登录')
      }
    }
  },
  activated () {
    console.log(123123)
    this.artist = JSON.parse(this.$route.query.artist)
    console.log('组件激活')
  },
  watch: {
    $route () {
      this.artist = JSON.parse(this.$route.query.artist)
      this.getMv()
      this.getSimiArtist()
    }
  }
}
</script>
<style lang="less"></style>
